import React from 'react'
import './type.css'
import { NavBar } from '@nutui/nutui-react';
import { ArrowLeft } from '@nutui/icons-react'
import { useNavigate } from "react-router-dom";
import { Link } from '@nutui/icons-react'
import { Button } from '@nutui/nutui-react'

export default function type() {
    const navigate = useNavigate();

    return (
        <div>
            <div className='typeNav'>
                <NavBar
                    back={
                        <>
                            <ArrowLeft width={20} height={20} onClick={() => navigate('/')} />
                        </>
                    }
                >
                    <h4>回收分类</h4>
                </NavBar>
            </div>
            <div className="type">
                <div className="typeitem">
                    <div className="typespan">
                        <div className="t1">|</div>
                        <div className="t2">数码电器</div>
                    </div>
                    <div className="typeimg">
                        <img src="https://mcprod.jumbo.ae/media/catalog/product/i/p/iphone_14_yellow_pdp_image_position-1a_en_1.jpg" />
                        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.7_4MZuyoEWFq8qxXR_r0NAHaHa?rs=1&pid=ImgDetMain" />
                        <img src="https://tse1-mm.cn.bing.net/th/id/OIP-C.mv_Axg_cZhk4lde3ZbVGQAHaG8?rs=1&pid=ImgDetMain" />
                    </div>
                </div>
                <div className="typeitem">
                    <div className="typespan">
                        <div className="t1">|</div>
                        <div className="t2">生活用品</div>
                    </div>
                    <div className="typeimg">
                        <img src="https://i5.walmartimages.com/asr/873aa490-e6a0-42ee-85dc-88360aaf986a_1.7363de3c30c382b0b2cb345a6c4c6d0a.jpeg" />
                        <img src="https://img.qqqnm.com/uploadfile/2015/1215/20151215052841653.jpg" />
                        <img src="https://img3.admin.3vjia.com/UpFile/C00000022/DesignMaterial/202009/02/09112189/VRenderImage_706110557.png" />
                    </div>
                </div>
                <div className="typeitem">
                    <div className="typespan">
                        <div className="t1">|</div>
                        <div className="t2">书本教材</div>
                    </div>
                    <div className="typeimg">
                        <img src="https://ts1.cn.mm.bing.net/th/id/R-C.1ea8015f2e7ad0f5c86fab2d09d5ac19?rik=EvYPT9y5kMYC4Q&riu=http%3a%2f%2fimg3.jarhu.com%2fgoodimages%2f201406%2f201%2fdi1403225114451.jpg&ehk=MPZZ1lbdRlRHGUqlfci%2brQfrsgOD8aNgQsfZSG2lXFI%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1" />
                        <img src="https://so1.360tres.com/t01dd9250162d540bd2.jpg" />
                        <img src="https://tse2-mm.cn.bing.net/th/id/OIP-C.dg1d4m_9N09uueXD_3xLegHaJj?rs=1&pid=ImgDetMain" />
                    </div>
                </div>
            </div>
            <div className="typebutton">
                <div className="typeleft"><Link />分享</div>
                <div className="typeright">
                    <Button
                        fill="outline"
                        style={{
                            margin: 8,
                            '--nutui-button-default-border-color': '#1cbf1f',
                            '--nutui-button-default-color': '#1cbf1f',
                        }}
                    >
                        我的订单
                    </Button>
                    <Button
                        style={{
                            margin: 8,
                            '--nutui-button-default-border-color': '#1cbf1f',
                            '--nutui-button-default-color': '#fff',
                            '--nutui-button-default-background-color': '#1cbf1f',
                        }}
                        onClick={()=>{
                            navigate('/recovery')
                        }}
                    >
                        立即回收
                    </Button>
                </div>
            </div>
        </div>
    )
}
